<!--销售礼卡主页面-->
<template>
<div class="main">
    <div class="top">
        <el-row>
            <el-col :span="10">
                <div class="logo">
                    <el-button type="primary" icon="el-icon-back" @click="showMainPage">&nbsp;&nbsp;{{$t("giftcard.returnBtnName")}}&nbsp;&nbsp;</el-button>
                </div>
            </el-col>
            <el-col :span="14">
            </el-col>
        </el-row>
    </div>
    <div class="center">
        <el-col :span="24">
            <el-form ref="form" :model="form" :rules="saveFormRules" label-width="120px" style="background-color:#ffffff;padding:30px 30px 5px 30px;">
                <el-form-item :label="$t('giftcard.route.saleCard.form.cardNo')" prop="cardNo">
                    <el-input v-model="form.cardNo"></el-input>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.saleCard.form.clientName')">
                    <el-col :span="12">
                        <el-input v-model="form.clientFirstName" :placeholder="$t('giftcard.route.saleCard.form.clientNameFirstName')" style="width: 100%;"></el-input>
                    </el-col>
                    <el-col :span="12">
                        <el-input v-model="form.clientFamilyName" :placeholder="$t('giftcard.route.saleCard.form.clientNameFamilyName')" style="width: 100%;"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.saleCard.form.clientPhone')">
                    <el-input v-model="form.clientPhone"><i slot="prefix" class="el-input__icon el-icon-phone-outline"></i></el-input>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.saleCard.form.orginMoney')" prop="orginMoney">
                    <el-input-number v-model="form.orginMoney" :min="100" :max="5000" :step="100" style="width:100%"></el-input-number>
                </el-form-item>
                <el-form-item :label="$t('giftcard.route.saleCard.form.payWay')" prop="payWay">
                    <el-radio-group v-model="form.payWay">
                        <el-radio label="1" border size="medium">{{$t("giftcard.route.saleCard.form.paywayList.cash")}}</el-radio>
                        <el-radio label="2" border size="medium">{{$t("giftcard.route.saleCard.form.paywayList.creditCard")}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="text-align:right">
                    <el-button type="primary" @click="addGiftCardEvent">{{$t("giftcard.route.saleCard.form.saveCardBtn")}}</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </div>
</div>
</template>

<script>
import {
    addGiftcard
} from '../../api/api';
export default {
    data() {
        return {
            form: {
                cardNo: '',
                orginMoney: '',
                clientFamilyName: '',
                clientFirstName: '',
                clientPhone: '',
                payWay: "1"
            },
            saveFormRules: {
                cardNo: [{
                    required: true,
                    message: this.$t("giftcard.route.saleCard.form.validCardNo"),
                    trigger: 'blur'
                }],
                orginMoney: [{
                    required: true,
                    message: this.$t("giftcard.route.saleCard.form.validOrginMoney"),
                    trigger: 'blur'
                }],
                payWay: [{
                    required: true,
                    message: this.$t("giftcard.route.saleCard.form.validPayWay"),
                    trigger: 'blur'
                }]
            },
        };
    },
    mounted() {},
    methods: {
        showMainPage() {
            //显示销售礼卡页面
            this.$router.push({
                path: '/giftcard/index'
            });
        },
        addGiftCardEvent() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let para = Object.assign({}, this.form);
                    addGiftcard(para).then(res => {
                        let {
                            msg,
                            code
                        } = res;
                        if (code !== "0") {
                            this.$message({
                                message: msg,
                                type: 'error'
                            });
                        } else {
                            this.$message({
                                message: this.$t("giftcard.route.saleCard.successMsg"),
                                type: 'success'
                            });
                        }
                    });
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~scss_vars';

.main {
    background-color: #012547;
    display: grid;
    grid-template-rows: 60px auto;
    color: #ffffff;
}

.top {
    background-color: #014171;
    padding: 0px 20px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: top;
    margin-top: 50px;
    padding: 0px 20px;
}

.nav {
    display: flex;
    justify-content: Center;
    align-items: Center;
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-size: 48px;
    color: #ffffff;
}

.logo {
    display: flex;
    justify-content: left;
    align-items: Center;
    height: 60px;
    font-size: 26px;
}

.userinfo {
    display: flex;
    justify-content: left;
    align-items: Center;
    text-align: right;
    float: right;
    height: 60px;
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>
